<template>
	<view class="chead">
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="none">
			<view class="hone">
				<image class="logo" src="/static/new/logo.png" />
				<view class="hright">
					<image class="yuicon" src="/static/new/yuicon.png"  @click="gettantwo" v-if="yuyan == 'zh'" />
					<image class="yuicon" src="/static/new/en.png"  @click="gettantwo" v-if="yuyan == 'en'" />
					<image class="yuicon" src="/static/new/ja.png"  @click="gettantwo" v-if="yuyan == 'ja'" />
					<image class="yuicon" src="/static/new/hh.png"  @click="gettantwo" v-if="yuyan == 'hh'" />
					<image class="yuicon" src="/static/new/fan.png"  @click="gettantwo" v-if="yuyan == 'fan'" />
					<view class="rcont"  @click="connectWallet">{{cont?cont:$t('i.链接钱包')}}</view>
					<image class="ricon" @click="shareLink" src="/static/new/share.png" />
				</view>
			</view>
		</u-sticky>
		<u-popup v-model="zshow" mode="center" width="70%">
			<view class="yupop" v-if="zshow">
				<view class="yuhead">
					<text class="qiehead">{{$t('i.切换语言')}}</text>
					<image class="cha" @click="zshow=false" src="/static/new/cha.png" />
				</view>
				<view class="popitem " :class="yuyan=='zh'?'pactive':''" @click="getyuyin('zh')">
					<image class="gou" src="/static/new/yuicon.png" />
					<text class="ptit">中文简体</text>
				</view>
				<view class="popitem " :class="yuyan=='en'?'pactive':''" @click="getyuyin('en')">
					<image class="gou" src="/static/new/en.png" />
					<text class="ptit">English</text>
				</view>
				<view class="popitem " :class="yuyan=='ja'?'pactive':''" @click="getyuyin('ja')">
					<image class="gou" src="/static/new/ja.png" />
					<text class="ptit">日本语</text>
				</view>
				<view class="popitem " :class="yuyan=='hh'?'pactive':''" @click="getyuyin('hh')">
					<image class="gou" src="/static/new/hh.png" />
					<text class="ptit">한국어</text>
				</view>
				<view class="popitem " :class="yuyan=='fan'?'pactive':''" @click="getyuyin('fan')">
					<image class="gou" src="/static/new/fan.png" />
					<text class="ptit">中文繁体</text>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
import { connectMetamask} from "@/utils/dapp.js"
	
export default {
	props: {
		shaishow: {
			type: Boolean,
			default: false
		},
		cont:{
			type: String,
			default: ''
		}
	
	},
	name: "Nheader",
	watch: {
		// 监听 props 中的 address
		cont(newVal, oldVal) {
			console.log('地址变化了：', '旧值：' + oldVal, '新值：' + newVal);
			this.cont = newVal
		// 这里写地址变化后的逻辑（如更新页面、调用接口等）
		// 例：地址变了就重新加载地图
		// this.loadMap(newVal);
		}
	},
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
			yuyan:'zh',
			zshow:false,
			// cont:''
		};
	},
	created(){
		
		if(uni.getStorageSync('locale')){
			this.yuyan = uni.getStorageSync('locale')
		}
		// console.log(this.$store.state.adress)
		// console.log(this.$store.getters.getAddress)
		// if(this.$store.state.adress){
		// 	this.cont = this.$store.state.adress;
		// }
	},
	methods: {
		leftClick() {
			this.$emit("leftClick");
		},
		connectWallet(){
			this.$emit("connectWallet");
		},
		async shareLink(){
			const addr = await connectMetamask()
			const url = window.location.origin
			const linkAdress = url + '/?i=' + addr
			const that = this
			uni.setClipboardData({
				data: linkAdress,
				success: function() {
					uni.showToast({
						title: that.$t('copy_success'),
					});
				}
			});
		},
		gettantwo(){
			// this.$emit("gettantwo");
			this.zshow = true
		},
		getyuyin(e) {
			this.yuyan = e
			this.switchLang(this.yuyan)
		},
		switchLang(e) {
			this.$i18n.locale = e
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale', e)
			 uni.setTabBarItem({
				index: 0,
				text: this.$t('i.首页')
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('i.市值')
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$t('i.权重榜')
			})
		},
	}
}
</script>

<style scoped lang="scss">
.hone {
	height: 112rpx;
	// background: #151A24;
	background: #21252F;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 40rpx;
	position: relative;
	z-index: 10;

	.hleft {
		padding: 10rpx 25rpx;
		border-radius: 30rpx;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 2rpx solid #0066FF;

		.hltit {
			font-size: 24rpx;
			font-family: Segoe UI, Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
		}

		.xia {
			width: 21rpx;
			height: 12rpx;
			margin-left: 15rpx;
		}
	}

	.hright {
		margin-left: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		.yuicon{
			width: 60rpx;
			height: 60rpx;
			margin-right: 25rpx;
		}

		.ricon {
			width: 40rpx;
			height: 41rpx;
			margin-left: 25rpx;
		}

		.rcont {
			background: #FE9605;
			color: #fff;
			// height: 52rpx;
			// background: linear-gradient(122deg, #1033F6 0%, #940AFF 100%);
			border-radius: 30rpx;
			opacity: 1;
			padding: 10rpx 25rpx;
			font-size: 24rpx;
			font-family: Segoe UI, Segoe UI;
			font-weight: 400;
		}
	}
	}
	.logo{
		width: 31px;
		height: 30px;
	}


	/deep/.u-mode-center-box{
	background-color: transparent;
}
.yupop{
	// width: 120px;
	// min-width: 140px;
	// position: absolute;
	// top: 58px;
	// right: 30rpx;
	// background-color: rgba(51, 51, 51, 0.802);
	// z-index: 100;
	// border-radius: 30rpx;
	// display: flex;
	// flex-direction: column;
	// padding: 10rpx 0;
	background: #1C222E;
	border-radius: 40rpx;
	padding: 40rpx;
	.yuhead{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 40rpx;
		.qiehead{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.cha{
			margin-left: auto;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.popitem{
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20px;
		justify-content: center;
		position: relative;
		background: rgba(255,255,255,0);
		border-radius: 40rpx;
		border: 1px solid #FFFFFF;
		margin-bottom: 15rpx;
		.ptit{
			color: #fff;
			font-size: 30rpx;
			font-weight: 400;
			display: inline-block;
			width: 145rpx;
		}
		.gou{
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	.pactive{
		background: #39CC77;
		border: 1px solid #39CC77;
		.gou{
			display: inline-block;
		}
		.ptit{
			color: #fff;
		}
	}
}

</style>
